<template>
  <div class="container" id="pdfDom">
    <n-form
      ref="formRef"
      :label-width="80"
      :model="formValue"
      :rules="rules"
      :size="small"
      label-placement="left"
      label-width="auto"
      label-align="left"
    >
      <div class="head">
        <div class="head-left">
          <div class="img">
            <img src="../../../assets/imgs/resume/avatar.jpg" alt="" />
          </div>
          <div class="name">
            <n-form-item label="姓 名 :" path="user.name" size="small">
              {{ studentInfo.name }}
            </n-form-item>
          </div>
        </div>
        <div class="head-right">
          <div class="age">
            <n-form-item label="年 龄 :" path="user.age" size="small">
              {{ studentInfo.age }}
            </n-form-item>
          </div>
          <div class="phone">
            <n-form-item label="电 话 :" path="user.phone" size="small">
              {{ studentInfo.phone }}
            </n-form-item>
          </div>
          <div class="mail">
            {{ studentInfo.email }}
          </div>
        </div>
      </div>
      <div class="dividingLine"></div>
      <div class="content">
        <div class="verticalBar">
          <img src="../../../assets/imgs/resume/verticalBar.png" alt="" />
        </div>

        <div class="content-right">
          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>教育经历</div>
              <div>EDUCATIONAL</div>
              <div>EXPERIENCE</div>
            </div>

            <div class="content-right-item-input">
              {{ studentInfo.educational_experience }}
            </div>
          </div>

          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>专业技能</div>
              <div>PROFESSIONAL</div>
              <div>SKILL</div>
            </div>
            <div class="content-right-item-input">
              {{ studentInfo.skill }}
            </div>
          </div>

          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>项目经历</div>
              <div>PROJECT</div>
              <div>EXPERIENCE</div>
            </div>
            <div class="content-right-item-input">
              {{ studentInfo.project_experience }}
            </div>
          </div>

          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>职位薪水</div>
              <div>JOB</div>
              <div>SALARY</div>
            </div>
            <div class="content-right-item-input">
              {{ studentInfo.dream_position }}
            </div>
            <div class="content-right-item-input">
              {{ studentInfo.dream_salary }}
            </div>
          </div>

          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>自我评价</div>
              <div>SELF</div>
              <div>EVALUATION</div>
            </div>
            <div class="content-right-item-input">
              {{ studentInfo.self_evaluation }}
            </div>
          </div>
        </div>
      </div>
    </n-form>
    <div class="btn">
      <n-button type="primary" @click="exportPDF" :class="{ isShow }"
        >导出PDF</n-button
      >
    </div>
  </div>
</template>

<script setup>
//引入接口
import { getStudentInfo, getStudentPicture } from "@/http/api/student"
import htmlToPdf from "@/plugins/htmlToPdf"
import { ref, onMounted, computed } from "vue"
// 定义属性
let isShow = ref(false)
const stripImg = ref(require("@/assets/imgs/resume/resume-strip.png"))
const dividerImg = ref(require("@/assets/imgs/resume/resume-divider.png"))
const studentInfo = ref({})
const avatar = ref()
const uid = ref()

// 定义方法
const exportPDF = () => {
  isShow .value = !isShow .value
  htmlToPdf.getPdf("个人简历")
}

//获取学生个人信息
const getInfo = () => {
  getStudentInfo()
    .then((result) => {
      // console.log(result.result[0])
      studentInfo.value = result.result[0]
      uid.value = result.result[0].user_id
    })
    .catch((err) => {
      console.log(err)
    })
}
// //获取学生用户头像
// const getPicture = () => {
//   const param = {
//     uid: 2,
//   }
//   getStudentPicture(param)
//     .then((result) => {
//       avatar.value = result.result[0].avatar
//     })
//     .catch((err) => {
//       console.log(err)
//     })
// }

// 生命周期钩子
onMounted(() => {
  getInfo()
  // getPicture()
})
</script>

<style lang="scss" scoped>
.container {
  .isShow{
    display: none;
  }
  .btn {
    display: flex;
    justify-content: space-around;
  }
  .dividingLine {
    background-color: black;
    width: 100%;
    height: 20px;
    margin: 10px 0px;
  }

  width: 80%;
  margin: 0 auto;
  .head {
    display: flex;
    justify-content: space-between;
    height: 200px;
    .head-left {
      display: flex;
      align-items: center;
      width: 50%;

      .name {
        ::v-deep .n-form-item .n-input {
          margin-left: -32px;
          width: 220px;
        }
      }

      .img img {
        width: 100px;
        height: 120px;
      }
    }
    .head-right {
      ::v-deep .n-form-item .n-input {
        margin-left: -32px;
        width: 220px;
      }

      width: 50%;
    }
  }
  .content {
    display: flex;
    .verticalBar {
      flex: 0 0 2px;
    }
    .content-right {
      flex: 1;
      .content-right-item {
        color: #5b5014;
        display: flex;
        width: 100%;
        height: 120px;
        .content-right-item-title {
          height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          flex: 0 0 120px;
        }
        .content-right-item-input {
          flex: 1;
          margin: 10px 5px;
          border: 1px solid;
        }
      }
    }
  }
  .btn {
    display: flex;
    justify-content: space-around;
  }
}
</style>
